<template>
    <div style="margin: 0 1rem">
        <x-button class="select-file-btn" @click.native="onSelectFileBtnClick">
            <template v-if="fileName">{{fileName}}</template>
            <template v-else>
                <i class="fa fa-upload" aria-hidden="true"></i>
                选择 .pdf、.doc 等文件
            </template>
        </x-button>
        <input
            v-show="false"
            @change="uploadFile"
            type="file"
            name="resume"
            accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,.pdf"
            ref="resumeFileInput"
        >
    </div>
</template>

<script>
    import {XButton} from 'vux';

    export default {
        name: 'UploadResume',
        components: {XButton},

        data() {
            return {
                fileName: null
            };
        },

        methods: {
            onSelectFileBtnClick() {
                this.$refs.resumeFileInput.click();
            },

            uploadFile(event) {
                let files = event.target.files || event.dataTransfer.files;

                if (!files.length) {
                    return;
                }
                let file = files[0];
                this.fileName = file.name;

                let params = new FormData();
                params.append('resume', file);

                this.$API.applicantRegister.resumeStorage(params)
                    .then(resp => {
                    }, () => {
                    });

                this.$refs.resumeFileInput.value = null;
            }
        }
    };
</script>

<style lang="less" scoped>
    .select-file-btn {
    }
</style>